<template>
    <div class="front-end-footer">
        <div class="suvivor_container">
            <div class="suvivor_wrap">
                <div class="char_image--wrap">
                    <div class="pic" :style="{
                        backgroundImage: `url(${pickObject.pickSur1})`
                    }"></div>
                    <div v-show="waitAni.sur1" class="wait_pic--animation"></div>
                </div>
                <div class="name_content">{{ teamInfo[gameInfo.survivorTeam].survivor[0] }}</div>
            </div>
            <div class="suvivor_wrap">
                <div class="char_image--wrap">
                    <div class="pic" :style="{
                        backgroundImage: `url(${pickObject.pickSur2})`
                    }"></div>
                    <div v-show="waitAni.sur2" class="wait_pic--animation"></div>
                </div>
                <div class="name_content">{{ teamInfo[gameInfo.survivorTeam].survivor[1] }}</div>
            </div>
            <div class="suvivor_wrap">
                <div class="char_image--wrap">
                    <div class="pic" :style="{
                        backgroundImage: `url(${pickObject.pickSur3})`
                    }"></div>
                    <div v-show="waitAni.sur3" class="wait_pic--animation"></div>
                </div>
                <div class="name_content">{{ teamInfo[gameInfo.survivorTeam].survivor[2] }}</div>
            </div>
            <div class="suvivor_wrap">
                <div class="char_image--wrap">
                    <div class="pic" :style="{
                        backgroundImage: `url(${pickObject.pickSur4})`
                    }"></div>
                    <div v-show="waitAni.sur4" class="wait_pic--animation"></div>
                </div>
                <div class="name_content">{{ teamInfo[gameInfo.survivorTeam].survivor[3] }}</div>
            </div>
        </div>
        <div class="map_container">
            <div class="logo_text-container">
                <img v-if="!baseSettingVO.gameLogo" src="@/assets/images/logo.png" />
                <img v-else :src="baseSettingVO.gameLogo" />
                <p>{{ baseSettingVO.gameName }}</p>
            </div>
            <div class="map_wrap" :style="{
                backgroundImage: `url(${mapPath})`
            }">
                <div class="map_text--wrap">
                    <p>{{ mapChinese }}</p>
                    <p>{{ gameInfo.session.toUpperCase() }}</p>
                </div>
            </div>
            <div class="global_bp--container">
                <p class="title1">Global Ban</p>
                <div class="bp-container3">
                    <div class="ban_item" v-for="(item, index) in hunGlobalBans" :key="index">
                        <n-icon v-if="!item" :size="13" color="#9d9a9b">
                            <LockClosed />
                        </n-icon>
                        <div v-else class="ban_pic" :style="{
                            backgroundImage: `url(${item})`
                        }">
                        </div>
                    </div>
                </div>
                <p class="title2">全局禁选</p>
                <div class="bp-container6">
                    <div class="ban_item" v-for="(item, index) in surGlobalBans" :key="index">
                        <n-icon v-if="!item" :size="13" color="#9d9a9b">
                            <LockClosed />
                        </n-icon>
                        <div v-else class="ban_pic" :style="{
                            backgroundImage: `url(${item})`
                        }">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hunter_container">
            <div class="char_image--wrap">
                <div class="pic" :style="{
                    backgroundImage: `url(${pickObject.pickHun})`
                }"></div>
                <div v-show="waitAni.hun" class="wait_pic--animation"></div>
            </div>
            <div class="name_content">{{ teamInfo[gameInfo.hunterTeam].hunter }}</div>
        </div>
    </div>
</template>

<script setup lang='ts' name="FrontEndFooter">
import BoardChannel from '@/utils/boardChannel';
import { baseOpacityImage } from '@/utils';
import { LockClosed } from '@vicons/ionicons5';
import { SettingForm, baseSetting } from '@/views/baseSetting/baseSetting';
import storeHelper from '@/utils/TauriStore';

interface GlobalBanInfo {
    survivorBans: string[],
    hunterBans: string[]
}
type PickSurKeys = keyof typeof pickObject;
const channel = new BoardChannel('bp-system');
const mapPath = ref('../../src/assets/images/hunter-bg.png');
channel.on('bpCharChange', (pic: PictureInfo) => {
    if (!(pic.key && pic.key in pickObject)) return;
    import(`@/assets/images/${pic.filePath}/${pic.path}.png`).then(res => {
        pickObject[pic.key as PickSurKeys] = res.default;
    })
});
// 等待动画对象
const waitAni = reactive({
    'sur1': false,
    'sur2': false,
    'sur3': false,
    'sur4': false,
    'hun': false
});
type WaitAniKeys = keyof typeof waitAni;
channel.on('showWaitAnimtion', (animationKeysJson: string) => {
    try {
        if (animationKeysJson) {
            const arr = JSON.parse(animationKeysJson);
            for (const key in waitAni) {
                waitAni[key as WaitAniKeys] = arr.includes(key);
            }
        } else {
            for (const key in waitAni) {
                waitAni[key as WaitAniKeys] = false;
            }
        }
    } catch (_) {
        for (const key in waitAni) {
            waitAni[key as WaitAniKeys] = false;
        }
    }
});
channel.on('clearBp', (clearMap: boolean) => {
    clearPictures(clearMap);
});
// 交换角色
channel.on('toggleSur', ({ nowIndex, toggleIndex }) => {
    let temp = pickObject[`pickSur${nowIndex + 1}` as PickSurKeys];
    pickObject[`pickSur${nowIndex + 1}` as PickSurKeys] = pickObject[`pickSur${toggleIndex}` as PickSurKeys];
    pickObject[`pickSur${toggleIndex}` as PickSurKeys] = temp;

});
const surGlobalBans = reactive<string[]>(new Array(9).fill(null));
const hunGlobalBans = reactive<string[]>(new Array(3).fill(null));
// 重置全局bp
channel.on('globalBpChange', async (globalBanInfo: GlobalBanInfo) => {
    // 清空数组
    surGlobalBans.splice(0, surGlobalBans.length, ...new Array(9).fill(null));
    hunGlobalBans.splice(0, hunGlobalBans.length, ...new Array(3).fill(null));
    // 加载幸存者ban图
    const surPromises = globalBanInfo.survivorBans.map(async (char, i) => {
        if (char) {
            const res = await import(`@/assets/images/surHalf/${char}.png`);
            surGlobalBans[i] = res.default;
        }
    });
    // 加载猎人ban图 - 注意这里应该是 hunterBans 而不是 survivorBans
    const hunPromises = globalBanInfo.hunterBans.map(async (char, i) => {
        if (char) {
            const res = await import(`@/assets/images/hunHalf/${char}.png`);
            hunGlobalBans[i] = res.default;
        }
    });
    // 等待所有图片加载完成
    await Promise.all([...surPromises, ...hunPromises]);
});
const pickObject = reactive({
    pickSur1: baseOpacityImage,
    pickSur2: baseOpacityImage,
    pickSur3: baseOpacityImage,
    pickSur4: baseOpacityImage,
    pickHun: baseOpacityImage
});
const clearPictures = (clearMap: boolean) => {
    Object.assign(pickObject, {
        pickSur1: baseOpacityImage,
        pickSur2: baseOpacityImage,
        pickSur3: baseOpacityImage,
        pickSur4: baseOpacityImage,
        pickHun: baseOpacityImage
    });
    if (clearMap) {
        mapPath.value = '../../src/assets/images/hunter-bg.png';
    }
}
const props = defineProps<{
    'teamInfo': TeamInfo,
    'gameInfo': IncSessionGameInfo
}>();

const mapChinese = ref('军工厂');
watch(() => props.gameInfo.pickMap, (path) => {
    if (!path) return;
    mapChinese.value = path;
    import(`@/assets/images/map/${path}.png`).then(res => {
        mapPath.value = res.default;
    })
});

const baseSettingVO = reactive<SettingForm>({
    gameName: ''
})
// 初始化baseSetting
const initBaseSetting = async () => {
    try {
        const settings = await storeHelper.get('baseSetting') as SettingForm;
        if (!settings) {
            Object.assign(baseSettingVO, baseSetting);
        } else {
            Object.assign(baseSettingVO, settings);
        }
    } catch (error) {
        console.log('错误！');
    }
}
// 初始化
onMounted(() => {
    initBaseSetting()
})
</script>
<style scoped lang='scss'>
$border-bg: rgba(255, 255, 255, 0.77);

@keyframes flask {

    0%,
    100% {
        background: rgba(255, 255, 255, 0.46);
    }

    50% {
        background: rgba(255, 255, 255, 0.1);
    }
}

.front-end-footer {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 429px auto 429px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('@/assets/images/frontEndBp-bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 100%;
        filter: grayscale(100%) brightness(70%) contrast(120%);
        z-index: -1;
    }

    .suvivor_container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        .suvivor_wrap {
            display: grid;
            grid-template-rows: auto 28px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            .char_image--wrap {
                height: 100%;
                width: calc(100% - 1px);
                background: linear-gradient(to bottom, transparent 0%, transparent 70%, #8b721690 100%);
                border-right: 1px solid $border-bg;
                border-top: 1px solid $border-bg;

                &:last-child {
                    border-right: none;
                }

                position: relative;

                .pic {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    transition: background-image 0.56s;
                    z-index: 1;
                }

                // 等待选取动画
                .wait_pic--animation {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(255, 255, 255, 0.7);
                    animation: flask 2s infinite linear forwards;
                }
            }

            .name_content {
                height: 100%;
                width: calc(100% - 1px);
                background: #000;
                color: #fff;
                text-align: center;
                border-right: 1px solid $border-bg;

                &:last-child {
                    border-right: none;
                }
            }
        }
    }

    .map_container {
        display: grid;
        grid-template-rows: 30px 66px auto;
        height: 100%;
        width: 100%;

        .logo_text-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1em;
            height: 100%;

            img {
                height: 22px;
                width: 22px;
                background:#fff;
                border-radius: 6px;
                overflow: hidden;
            }

            p {
                color: #fff;
                font-size: 0.8em;
                font-weight: bolder;
            }
        }

        .map_wrap {
            background-size: cover;
            background-position: center;
            transition: background-image 0.3s;
            display: flex;
            align-items: flex-end;

            .map_text--wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 1em;
                width: calc(100% - 2em);
                font-size: 0.8em;
                font-weight: bolder;
                color: #fff;
            }
        }

        .global_bp--container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-template-areas:
                "Left Top Right"
                "Bottom Bottom Bottom";
            align-items: center;

            .title1 {
                grid-area: Left;
                text-align: center;
                color: #fff;
                font-size: 0.8em;
                font-weight: bolder;
            }

            .bp-container3 {
                grid-area: Top;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px;

                .ban_item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 18px;
                    height: 18px;
                    border: 1px solid #9d9a9b;
                    background: #000;
                    position: relative;

                    .ban_pic {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        background-size: auto 100%;
                        /* 高度填满，宽度按比例缩放 */
                        background-position: center;
                        /* 让图片居中 */
                        background-repeat: no-repeat;
                        filter: grayscale(100%);
                    }
                }
            }

            .title2 {
                grid-area: Right;
                text-align: center;
                color: #fff;
                font-size: 0.8em;
                font-weight: bolder;
            }

            .bp-container6 {
                grid-area: Bottom;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px;

                .ban_item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 18px;
                    height: 18px;
                    border: 1px solid #9d9a9b;
                    background: #000;
                    position: relative;

                    .ban_pic {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        filter: grayscale(100%);
                    }
                }
            }
        }
    }

    .hunter_container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: auto 28px;
        box-sizing: border-box;


        .char_image--wrap {
            height: 100%;
            width: calc(100% - 1px);
            background: linear-gradient(to bottom, transparent 0%, transparent 70%, #FF440045 100%);
            border-left: 1px solid $border-bg;
            border-top: 1px solid $border-bg;
            position: relative;

            .pic {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                background-size: cover;
                transition: background-image 0.56s;
                z-index: 1;
            }

            // 等待选取动画
            .wait_pic--animation {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.7);
                animation: flask 2s infinite linear forwards;
            }
        }

        .name_content {
            height: 100%;
            width: 100%;
            background: #000;
            color: #fff;
            text-align: center;
        }

    }
}
</style>